<template>
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-select v-model="form.roadId" clearable filterable placeholder="选择公路" @change="changeOptions($event)"
                 @clear="isEmpty(0)">
        <el-option
          v-for="item in highWayNameList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.roadSectionId" @focus="getRoadSectionList()" clearable filterable
                 placeholder="选择路段">
        <el-option
          v-for="item in roadSectionNameList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">添加布控</el-button>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column prop="roadName" label="路线" width="220" align="center"></el-table-column>
        <el-table-column prop="roadSectionName" label="区间" width="220" align="center"></el-table-column>
        <el-table-column prop="layoutPerson" label="布设人员" align="center"></el-table-column>
        <el-table-column prop="layoutPhone" label="联系方式" align="center"></el-table-column>
        <el-table-column prop="layoutTime" label="布设时间" width="220" align="center">
          <template slot-scope="scope">{{scope.row.layoutTime | formatTimer}}
          </template>
        </el-table-column>
        <el-table-column prop="layoutReason"  show-overflow-tooltip fit="false" label="布设原因"
                         align="center"></el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-button type="text"  @click="checkDetails(scope.row)">查看详情
            </el-button>
            <el-button type="text"  @click="handleEdit(scope.row)" style="color: #0bb20c">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>

    <el-dialog
      :title=this.info.title
      :close-on-click-modal="false"
      :visible.sync="info.dialogVisible"
      width="736px">
      <div class="module general-bgcolor">
        <el-form label-position="left" :rules="rules" ref="form" label-width="100px" :model="currentRow">
          <el-row>
            <el-col :span="12">
              <el-form-item label="布设路线" prop="layoutPerson">
                <el-select v-model="currentRow.roadId" clearable filterable placeholder="选择路线" @clear="isEmpty(1)"
                           @change="changeOptions($event)">
                  <el-option
                    v-for="item in highWayNameList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="布设区间" prop="layoutPerson">
                <el-select v-model="currentRow.roadSectionId" @focus="getRoadSectionList()"
                           clearable filterable placeholder="选择路段">
                  <el-option
                    v-for="item in roadSectionNameList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="布设摄像机" prop="layoutPerson">
            <el-select v-model="currentRow.cameraIdList" clearable multiple filterable placeholder="选择设备id">
              <el-option
                v-for="item in cameraSelectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.type==1">
              </el-option>
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="布控点名称" prop="name">
                <el-input v-model="currentRow.name" placeholder="布控点名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="布设人员" prop="layoutPerson">
                <el-input v-model="currentRow.layoutPerson" placeholder="布设人员名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="布设日期：" prop="endTime">
                <el-date-picker
                  v-model="currentRow.layoutTime"
                  type="datetime"
                  value-format="timestamp"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="联系方式" prop="layoutPhone" >
                <el-input v-model="currentRow.layoutPhone" placeholder="联系方式" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="布设原因" prop="layoutReason">
            <el-input v-model="currentRow.layoutReason" placeholder="请输入..." type="textarea" :autosize="{ minRows: 4}"
                      clearable ></el-input>
          </el-form-item>
          <div class="uploadPhoto">
            <el-form-item label="现场布设图：" prop="projectInfoImgList">
              <upload-img v-model="currentRow.photoList" :limit="5" :size-limit="4"
                          ref="uploadPic"></upload-img>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="info.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="validateForm()" style="background: #1990FE">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="路段布设详情"
      :close-on-click-modal="false"
      width="900px"
      :visible.sync="detailsDialogVisible"
      custom-class="dialog-dark-big high-way-details">
      <div class="bg-white">
        <div class="row-detail">
          <div class="row-detail-item">
            <label class="info-label">公路名称:</label>
            <div class="info-content">{{currentRow.roadName}}</div>
          </div>
          <div class="row-detail-item">
            <label class="info-label">路段名称:</label>
            <div class="info-content">{{currentRow.roadSectionName}}</div>
          </div>
          <div class="row-detail-item">
            <label class="info-label">布设人员:</label>
            <div class="info-content">{{currentRow.layoutPerson}}</div>
          </div>
          <div class="row-detail-item">
            <label class="info-label">联系方式:</label>
            <div class="info-content">{{currentRow.contactInfo}}</div>
          </div>
          <div class="row-detail-item">
            <label class="info-label">布设日期:</label>
            <div class="info-content">{{currentRow.layoutTime | formatTimer}}</div>
          </div>
          <div class="row-detail-item">
            <label class="info-label">布设原因:</label>
            <div class="info-content">{{currentRow.layoutReason}}</div>
          </div>
        </div>
        <el-row>
          <el-card shadow="always">
            <el-row>
              <p style="margin-left: 10px"><label class="info-label">路段相关图片:</label></p>
              <hr/>
              <el-image v-for="(item,index) in currentRow.photoList" :key="index"
                        @click="_previewImg(index,currentRow.photoList)"
                        style="width: 100px; height: 100px;margin-right: 15px;"
                        :src="constUrl + item">
              </el-image>
            </el-row>
          </el-card>
        </el-row>
      </div>
    </el-dialog>
    <!-- 查看大图 -->
    <picture-viewer ref="imageViewer1"></picture-viewer>
  </div>
</template>
<script>
import {getRoadSectionSelectList, getRoadSelectList} from '@/services/model/road-mgmt'
import UploadImg from '@/components/upload-img'
import PictureViewer from '@/components/picture-viewer'
import constUrl from '@/services/env'
import {getCameraIdList} from '@/services/model/road-control'
import {
  getRoadControlList,
  addRoadControl,
  updateRoadControl,
} from '@/services/model/road'
import Format from '@/utils/format'

const RULES = {
  highwayId: {
    required: true,
    message: '请选择公路',
    trigger: 'change'
  },
  roadSectionName: {
    required: true,
    message: '请输入路段名称',
    trigger: 'change'
  }
}
export default {
  components: {PictureViewer, UploadImg},
  data() {
    return {
      constUrl,
      roadId: '',
      highWayNameList: [],
      cameraSelectList: [],
      deviceCameraList: [],
      deviceRoadList: [],
      roadSectionNameList: [],
      deviceTableData: [],
      detailsDialogVisible: false,
      info: {
        title: '',
        dialogVisible: false,
      },
      selectIdentity: '',
      identityInfo: '',
      form: {
        page: 1,
        pageSize: 10,
      },
      rules: RULES, // 表单校验的规则
      tableList: [],
      currentRow: {} // 新增数据
    }
  },
  computed: {
    firstData() {
      return this.$store.state.userInfo
    },
  },
  methods: {
    //关联关系清空
    isEmpty(val) {
      switch (val) {
        case 0:
          this.roadSectionNameList = []
          this.form.roadSectionId = ''
          this.form.page = 1;
          this.queryList()
          break;
        case 1:
          this.roadSectionNameList = []
          this.currentRow.roadSectionId = ''
          break;
      }
    },
    //获取
    changeOptions(params) {
      this.roadId = params
    },
    // 获取可布控的摄像机
    async getCameraIdList() {
      let {data} = await getCameraIdList();
      this.cameraSelectList = data || []
    },
    //查询公路
    async getRoadSelectList() {
      const res = await getRoadSelectList()
      this.highWayNameList = res.data
    },
    //路段下拉
    async getRoadSectionList() {
      let res = await getRoadSectionSelectList({roadId: this.roadId})
      this.roadSectionNameList = res?.data || []
    },
    handleSelectionChange() {
    },
    checkDetails(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.detailsDialogVisible = true
    },
    /**
     * row  当前操作行的对象
     */
    async handleEdit(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      await this.getRoadSectionList(this.currentRow.highwayId)
      this.info.title = '更新路段布控'
      this.info.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 表单提交
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitData()
        }
      })
    },
    // 新增编辑提交数据
    async submitData() {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? updateRoadControl : addRoadControl
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '修改成功' : '添加成功'
        })
        this.info.dialogVisible = false
        this.queryList()
        return true
      }
    },
    handleAdd() {
      this.currentRow = {
        status: 0,
      }
      this.info.title = '新增路段布控'
      this.info.dialogVisible = true

      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    //查看大图
    _previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      let urlsList = urlList.map(x => {
        x = this.constUrl + x
        return x
      })
      // 显示照片查看器
      this.$refs.imageViewer1.showViewer(urlsList, index)
    },
    // 查询数据
    async queryList() {
      let res = await getRoadControlList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    },
  },
  created() {
  },
  mounted() {
    this.queryList()
    this.getRoadSelectList()
    this.getCameraIdList()
  },
  activated() {
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      if (timer) {
        return Format(new Date(timer),"yyyy年MM月dd日")
      }
    },
  },

}
</script>
<style lang="less" scoped>

  .row-detail-item {
    display: flex;
    line-height: 1.4;
    padding: 5px 5px;
  }

  .row-detail {
    font-size: 12px;
    color: #909399;
    padding-top: 12px;
    position: relative;
  }

  .info-label {
    display: inline-block;
    min-width: 60px;
    vertical-align: top;
    font-size: 15px;
    color: #1990FE;
  }

  .info-content {
    color: #606266;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    word-break: break-all;
    font-size: 15px;
    margin-left: 10px;
  }

  .specific-info {
    width: 300px;
    margin-left: 5px;
  }

  .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 220px;
  }

  .label_road {
    text-align: left;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    margin-top: 5px;
    box-sizing: border-box;
    width: 80px !important;
  }

  .table-one {
    overflow-y: auto;
    transition: width .28s;
    margin-top: 20px;
    overflow: hidden;
    overflow: auto;
  }

  .table-one::-webkit-scrollbar {
    width: 2px;

  }

  .table-one::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(128, 128, 128);

  }

  .table-one::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(92, 155, 232, 0.2);
    border-radius: 0;
    background: rgba(92, 155, 232, 0.1);

  }

  .main-color {
    color: #307ecc;
  }

</style>

